<!DOCTYPE html>
<html lang="ar" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<meta charset="utf-8" />
	<title>Takween</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<h:outputStylesheet id="sh0" name="css/style.css" />
	<!-- Loading Bootstrap -->
	<h:outputStylesheet id="sh1" name="bootstrap/css/bootstrap.css" />

	<!-- Loading Flat UI -->
	<h:outputStylesheet id="sh2" name="css/flat-ui.css" />


	<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
	<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
</h:head>
<h:body dir="ltr">
	<div class="container">
		<header style="padding-top: 10px;">
			<div class="logo" style="float: right;">
				<img src="/TAKWEEN/resources/images/logo.jpg" />
			</div>
			<div style="float: left;">
				<div>
					<img src="/TAKWEEN/resources/images/facebook-icon.png" /> &#160; <img
						src="/TAKWEEN/resources/images/youtube-icon.png" /> &#160; <img
						src="/TAKWEEN/resources/images/twitter-icon.png" />
				</div>
			</div>
			<div style="clear: both;"></div>
			<div class="navbar navbar-inverse">
				<div class="navbar-inner">

					<button type="button" class="btn btn-navbar" data-toggle="collapse"
						data-target="#nav-collapse-01"></button>
					<div class="nav-collapse collapse" id="nav-collapse-01">
						<ul class="nav">
							<li class="active"><a href="#fakelink"> الصفحة الرئيسية
							</a></li>
							<li><a href="#fakelink"> من نحن <!--<span class="navbar-unread">1</span>-->
							</a></li>
							<li><a href="#fakelink"> البرامج</a>
								<ul>
									<li><a href="#fakelink">الموارد البشرية</a></li>
									<li><a href="#fakelink">مهارات الإتصال</a>
										<ul>
											<li><a href="#fakelink">لغة الجسد</a></li>
											<li><a href="#fakelink">مهارات الإقناع</a></li>
											<li><a href="#fakelink">التواصل الإجتماعي</a></li>
										</ul> <!-- /Sub menu --></li>
									<li><a href="#fakelink">المحاسبة</a></li>
								</ul></li>
							<li><a href="#fakelink"> مساعدة </a></li>
						</ul>
					</div>
					<!--/.nav -->

				</div>
			</div>

		</header>
		<h:form id="f1">
		<div style="float: right;">
			
			<div>
				<p:commandLink ajax="true" action="#{testBean.fillOneDiv}"
					value="Fill One" update="testing" oncomplete="reload()"></p:commandLink>
			</div>
			<div>
				<p:commandLink ajax="true" action="#{testBean.fillTwoDiv}"
					value="Fill Two" update="testing" oncomplete="reload()"></p:commandLink>
			</div>
			<div>
				<p:commandLink ajax="true" action="#{testBean.fillThreeDiv}"
					value="Fill Three" update="testing" oncomplete="reload()"></p:commandLink>
			</div>
			
		</div>

		<div
			style="position: relative; width: 850px; background-color: #003399; overflow: hidden;">
			<div
				style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
				<!-- Jssor Slider Begin -->
				<p:outputPanel id="testing" layout="block">
				<div id="slider_container"
					style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 850px; height: 400px; background: url(/TAKWEEN/resources/images/major/main_bg.jpg) top center no-repeat;">
					<!-- Loading Screen -->
					<div u="loading" style="position: absolute; top: 0px; left: 0px;">
						<div
							style="filter: alpha(opacity =   70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;">
						</div>
						<div
							style="position: absolute; display: block; background: url(/TAKWEEN/resources/images/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;">
						</div>
					</div>
					<!-- Slides Container -->
					
					<div  u="slides" 
						style="cursor: move; position: absolute; left: 0px; top: 0px; width: 850px; height: 400px; overflow: hidden; direction: rtl;">
						<!-- OUTER DIVS -->
						<c:forEach begin="1"  end="#{testBean.divSize}">
						
							<div>
								<div
									style="position: absolute; width: 480px; height: 300px; top: 10px; right: 10px; text-align: right; line-height: 1.8em; font-size: 12px;">
									<br /> <span
										style="display: block; line-height: 1em; text-transform: uppercase; font-size: 52px; color: #FFFFFF;">عنوان
										جديد</span> <br /> <br /> <span
										style="display: block; line-height: 1.1em; font-size: 2.5em; color: #FFFFFF;">
										حلول و مشاكل </span> <br /> <span
										style="display: block; line-height: 1.1em; font-size: 1.5em; color: #FFFFFF;">
										فقرة قصيرة توضح أي شيء(لا يأس مع الحياة).</span> <br /> <br /> <a
										href="http://www.jssor.com"> <img
										src="/TAKWEEN/resources/images/major/find-out-more-bt.png" border="0"
										alt="auction slider" width="215" height="50" /></a>
								</div>
								<div
									style="position: absolute; width: 500px; height: 300px; top: 23px; left: 0px; background: url(/TAKWEEN/resources/images/major/s2.png) top no-repeat;">
								</div>
								<img u="thumb" src="/TAKWEEN/resources/images/major/s2t.jpg" />
							</div>
						</c:forEach>

					</div>
					
					<!-- Direction Navigator Skin Begin -->
					
					<!-- Arrow Left -->
					<span u="arrowleft" class="jssord07l"
						style="width: 50px; height: 50px; top: 123px; left: 8px;"></span>
					<!-- Arrow Right -->
					<span u="arrowright" class="jssord07r"
						style="width: 50px; height: 50px; top: 123px; right: 8px"></span>
					<!-- Direction Navigator Skin End -->
					<!-- ThumbnailNavigator Skin Begin -->
					<div u="thumbnavigator" class="jssort04"
						style="position: absolute; width: 600px; height: 60px; right: 0px; bottom: 0px;">
						<!-- Thumbnail Item Skin Begin -->
						
						<div u="slides" style="bottom: 25px; right: 30px;">
							<div u="prototype" class="p"
								style="position: absolute; width: 62px; height: 32px; top: 0; left: 0;">
								<div class="w">
									<thumbnailtemplate
										style="width: 100%; height: 100%; border: none; position: absolute; top: 0; left: 0;"></thumbnailtemplate>
								</div>
								<div class="c"
									style="position: absolute; background-color: #000; top: 0; left: 0">
								</div>
							</div>
						</div>
						<!-- Thumbnail Item Skin End -->
					</div>
					<!-- ThumbnailNavigator Skin End -->
					<a style="display: none" href="http://www.jssor.com">jQuery
						Gallery</a>
				</div>
				</p:outputPanel>



			</div>
		</div>
		</h:form>
		



	</div>


	<!-- Load JS here for greater good =============================-->
	<!--<script src="js/jquery-1.8.3.min.js"></script>-->
	<h:outputScript name="js/jquery-1.9.1.min.js" />
	<h:outputScript name="js/jquery-ui-1.10.3.custom.min.js" />
	<h:outputScript name="js/jquery.ui.touch-punch.min.js" />
	<h:outputScript name="js/jssor.slider.mini.js" />
	<h:outputScript name="js/bootstrap.min.js" />
	<h:outputScript name="js/bootstrap-select.js" />
	<h:outputScript name="js/bootstrap-switch.js" />
	<h:outputScript name="js/flatui-checkbox.js" />
	<h:outputScript name="js/flatui-radio.js" />
	<h:outputScript name="js/jquery.tagsinput.js" />
	<h:outputScript name="js/jquery.placeholder.js" />
	<h:outputScript name="js/jquery.stacktable.js" />
	<h:outputScript name="js/application.js" />
	<script>
		jQuery(document).ready(
				function($) {

					var options = {
						$AutoPlay : true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
						$AutoPlayInterval : 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
						$PauseOnHover : 3, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3

						$ArrowKeyNavigation : true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
						$SlideDuration : 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
						$MinDragOffsetToSlide : 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
						//$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
						//$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
						$SlideSpacing : 0, //[Optional] Space between each slide in pixels, default value is 0
						$DisplayPieces : 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
						$ParkingPosition : 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
						$UISearchMode : 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, direction navigator container, thumbnail navigator container etc).
						$PlayOrientation : 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
						$DragOrientation : 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

						$DirectionNavigatorOptions : { //[Optional] Options to specify and enable direction navigator or not
							$Class : $JssorDirectionNavigator$, //[Requried] Class to create direction navigator instance
							$ChanceToShow : 1, //[Required] 0 Never, 1 Mouse Over, 2 Always
							$AutoCenter : 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
							$Steps : 1
						//[Optional] Steps to go for each navigation request, default value is 1
						},

						$ThumbnailNavigatorOptions : {
							$Class : $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
							$ChanceToShow : 2, //[Required] 0 Never, 1 Mouse Over, 2 Always

							$ActionMode : 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
							$AutoCenter : 0, //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
							$Lanes : 1, //[Optional] Specify lanes to arrange thumbnails, default value is 1
							$SpacingX : 3, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
							$SpacingY : 3, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
							$DisplayPieces : 9, //[Optional] Number of pieces to display, default value is 1
							$ParkingPosition : 260, //[Optional] The offset position to park thumbnail
							$Orientation : 1, //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
							$DisableDrag : false
						//[Optional] Disable drag or not, default value is false
						}
					};

					var jssor_slider1 = new $JssorSlider$("slider_container",
							options);

					//responsive code begin
					//you can remove responsive code if you don't want the slider scales while window resizes
					/*
					function ScaleSlider() {
					    var bodyWidth = document.body.clientWidth;
					    if (bodyWidth)
					        jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 960));
					    else
					        $JssorUtils$.$Delay(ScaleSlider, 30);
					}

					ScaleSlider();

					if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
					    $(window).bind('resize', ScaleSlider);
					}
					 */
					//responsive code end
				});

		function reload() {
			
			var options = {
				$AutoPlay : true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
				$AutoPlayInterval : 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
				$PauseOnHover : 3, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, default value is 3

				$ArrowKeyNavigation : true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
				$SlideDuration : 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
				$MinDragOffsetToSlide : 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
				//$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
				//$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
				$SlideSpacing : 0, //[Optional] Space between each slide in pixels, default value is 0
				$DisplayPieces : 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
				$ParkingPosition : 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
				$UISearchMode : 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, direction navigator container, thumbnail navigator container etc).
				$PlayOrientation : 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
				$DragOrientation : 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

				$DirectionNavigatorOptions : { //[Optional] Options to specify and enable direction navigator or not
					$Class : $JssorDirectionNavigator$, //[Requried] Class to create direction navigator instance
					$ChanceToShow : 1, //[Required] 0 Never, 1 Mouse Over, 2 Always
					$AutoCenter : 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
					$Steps : 1
				//[Optional] Steps to go for each navigation request, default value is 1
				},

				$ThumbnailNavigatorOptions : {
					$Class : $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
					$ChanceToShow : 2, //[Required] 0 Never, 1 Mouse Over, 2 Always

					$ActionMode : 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
					$AutoCenter : 0, //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
					$Lanes : 1, //[Optional] Specify lanes to arrange thumbnails, default value is 1
					$SpacingX : 3, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
					$SpacingY : 3, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
					$DisplayPieces : 9, //[Optional] Number of pieces to display, default value is 1
					$ParkingPosition : 260, //[Optional] The offset position to park thumbnail
					$Orientation : 1, //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
					$DisableDrag : false
				//[Optional] Disable drag or not, default value is false
				}
			};

			var jssor_slider1 = new $JssorSlider$("slider_container", options);

		}
	</script>
</h:body>


</html>